<?php
/* @var $this yii\web\View */
?>
<h1>vue/vue</h1>

<?php
$css = <<<CSS
.class1{
  background: #444;
  color: #eee;
}

.active {
    width: 100px;
    height: 100px;
}

.base{
    width: 100px;
    height: 100px;
}

.text-danger {
    background: red;
}
CSS;
$this->registerCss($css)
?>

<p>
    You may change the content of this page by modifying
    the file <code><?= __FILE__; ?></code>.
</p>
<div id="vue_det">
    <h3>site : {{site}}</h3>
    <h3>url : {{url}}</h3>
    <h3>Alexa : {{alexa}}</h3>
</div>

<div id="app">
    <label for="r1">修改颜色</label> <input type="checkbox" v-model="use" id="r1">
    <br><br>
    <div v-bind:class="{'class1': use}">
        v-bind:class 指令
    </div>
</div>

<div id="jud">
    {{5+5}}<br>
    {{ok ? 'YES' : 'NO'}}<br>
    {{message.split('').reverse().join('')}}
    <div v-bind:id="'list-' + id">测试vue完整javascript</div>
</div>
<br>

<div id="ifapp">
    <p v-if="seen">现在你看到我了</p>
</div>

<div id="url">
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
    <a v-on:href="doSomething"></a>
</div>
<br>
<div id="message">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
<br>

<div id="button">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>
<br>
<div>------------------自定义过滤器--------------</div>
<div id="filter">
    {{ message | capitalize }}
</div>
<br>
<div id="bind-string">
    <input type="text" v-model="message">
    <p>请输入原始字符串:{{message}}</p>
    <button @click="stringReverse">点我反转字符串</button>
    <p>计算后反转字符串:{{newMessage}}</p>
    <button @click="clear">清空</button>
</div>
<?php
$js = <<<JS
// 我们的数据对象
var data = { site: "测试vue", url: "www.vue.com", alexa: 10000};
var vm = new Vue({
    el: '#vue_det',
    data: data
});

new Vue({
    el: '#app',
    data:{
        use:false
    }
});

new Vue({
    el:"#jud",
    data: {
        ok: true,
        message: 'aniu',
        id:2
    }
});

new Vue({
  el: '#ifapp',
  data: {
    seen: true
  }
});

new Vue({
  el: '#url',
  data: {
    url: 'http://www.runoob.com',
    doSomething:true
  }
});
// v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
new Vue({
  el: '#message',
  data: {
    message: 'Runoob!'
  }
});


new Vue({
    el: '#button',
    data: {
        message:'aniu'
    },
    methods:{
        reverseMessage:function() {
          this.message = this.message.split('').reverse().join('')
        }
    }
});


new Vue({
    el:'#filter',
    data:{
        message:'aniu'
    },
    filters:{
        capitalize:function(value) {
          if (!value)return '';
          value = value.toString();
          return value.charAt(0).toUpperCase() + value.slice(1);
        }
    }
});

new Vue({
    el:"#bind-string",
    data: {
        message:'',
        newMessage:''
    },
    methods: {
        stringReverse:function() {
          this.newMessage = this.message.split('').reverse().join('');
        },
        clear:function() {
          this.message = '';
          this.newMessage = '';
        }
    }
    
});
// // 它们引用相同的对象！
// document.write(vm.site === data.site); // true
// document.write("<br>");
// // 设置属性也会影响到原始数据
// vm.site = "aniu";
// document.write(data.site + "<br>"); // Runoob
//
// // ……反之亦然
// data.alexa = 1234;
// document.write(vm.alexa); // 1234
JS;
$this->registerJs($js)
?>
<div id="range">
    <!--    <ol>-->
    <!--        <li v-for="site in sites">-->
    <!--            {{ site.name }}-->
    <!--        </li>-->
    <!--    </ol>-->
    <template v-for="site in sites">
        <li>{{site.name}}</li>
        <li>--------------</li>
    </template>
</div>
<br>
<!--<div id="test-computed">-->
<!--    {{site}}-->
<!--</div>-->
<br>
<div id="computed_props">
    千米 : <input type="text" v-model="kilometers">
    米 : <input type="text" v-model="meters">
</div>
<p id="info"></p>
<br>

<div id="app-city">
    省份：
    <select v-model="province">
        <option selected="selected">
            请选择
        </option>
        <option v-bind:value="p" v-for="p in provinces">
            {{p}}
        </option>
    </select>
    城市：
    <select v-model="city">
        <option selected="selected">
            请选择
        </option>
        <option v-bind:value="c" v-for="c in cityList">
            {{c}}
        </option>
    </select>
</div>
<div id="test-class">
    <div v-bind:class="{ 'active': 'isActive'}"></div>
</div>
<br>
<div id="test-classObject">
    <div v-bind:class="classObject"></div>
</div>

<br>
<div id="onclick">
    <button v-on:click="greet">Greet</button>
</div>
<br>

<div id="components-demo3" class="demo">
    <button-counter2></button-counter2>
    <button-counter2></button-counter2>
    <button-counter2></button-counter2>
</div>

<div id="test-model">
    <runoob-input v-model="num"></runoob-input>
    <p>输入的数组:{{num}}</p>
</div>
<br>

<div id="test-ajax">
    {{info}}
</div>

<br>
<div id="test-jsonp">
    请输入关键字: <input type="text" , v-model="keyword" @keyup="sendJsonP(keyword)">
    <ur>
        <li v-for="r in result">{{r}}</li>
    </ur>
</div>
<br>
<p id="test1">这是<b>粗体</b>文本。</p>
<p id="test2">这是另一段<b>粗体</b>文本。</p>
<button id="btn1">显示旧/新文本</button>
<button id="btn2">显示旧/新 HTML</button>
<?php
$js = <<<JS
new Vue({
    el:"#range",
    data: {
        sites: [
            { name: 'Runoob' },
            { name: 'Google' },
            { name: 'Taobao' }
        ]
    }
});
// 测试computed 会进行缓存，method不会
new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ');
        this.name = names[0];
        this.url = names[names.length - 1]
      }
    }
  }
});
var am = new Vue({
el: '#computed_props',
data: {
    kilometers : 0,
    meters:0
},
methods: {
},
computed :{
},
watch : {
    kilometers:function(val) {
        this.kilometers = val;
        this.meters = this.kilometers * 1000
    },
    meters : function (val) {
        this.kilometers = val/ 1000;
        this.meters = val;
    }
}
});
var vm = new Vue({
      el: '#app-city',
      data: {
        city: '请选择',
        province: '请选择',
        provinces: ['广东', '湖南', '湖北', '北京'],
        cityList: [],
        area: [{
          name: '广东',
          id: 1,
          child: ['广州', '深圳', '东莞']
        },
        {
          name: '湖南',
          id: 2,
          child: ['长沙', '株洲', '湘潭']
        },
        {
          name: '湖北',
          id: 3,
          child: ['武汉']
        },
        {
          name: '北京',
          id: 4,
          child: ['北京']
        }]
      },
      watch: {
        province: function(nval, oval) {
          var self = this;
          var cityList = [];
          if (nval === '请选择') {
            this.citylist = [];
          }
          if (nval !== oval) {
            for (var i = 0; i < self.area.length; i++) {
              if (self.area[i].name === nval) {
                cityList = self.area[i].child;
              }
            }
            this.city = "请选择";
            this.cityList = cityList;
          }
        }
      }
});
new Vue({
    el:"#test-class",
    data: {
        isAactive: true
    }
});
new Vue({
  el: '#test-classObject',
  data: {
    isActive: true,
    error: {
      value: true,
      type: 'fatal'
    }
  },
  computed: {
    classObject: function () {
      return {
  base: true,
        active: this.isActive && !this.error.value,
        'text-danger': this.error.value && this.error.type === 'fatal',
      }
    }
  }
});
// 联动触发
new Vue({
    el:"#onclick",
    data:{
        name:'Vue.js'
    },
    methods:{
      greet: function(event) {
        alert('Hello '+this.name+'!');
        if (event){
            alert(event.target.tagName);
        }
      }
    }
});
// 事件修饰符

// 自定义事件
var buttonCounter2Data = {
  count: 0
};
Vue.component('button-counter2', {
    data:function() {
      return buttonCounter2Data
    },
    template:'<button v-on:click="count++">点击了{{count}}次</button>'
});
new Vue({
    el:"#components-demo3"
});

// 自定义v-model
Vue.component('runoob-input', {
    template:`
    <p>   <!-- 包含了名为 input 的事件 -->
      <input
       ref="input"
       :value="value" 
      >
    </p>
    `,
    props:['value'], //名为value的 prop
});
new Vue({
    el: '#test-model',
    data: {
        num: 100,
    }
});

// axios get方法
// new Vue({
//     el:"#test-ajax",
//     data(){
//         return {
//             info:null
//         }
//     },
//     mounted(){
//         axios
//         .get('https://www.runoob.com/try/ajax/json_demo.json')
//         .then(response => (this.info = response.data.sites))
//         .catch(function(error) {
//             console.log(error);
//         })
//     }
// });

// axios post方法
new Vue({
  el: '#test-ajax',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .post('https://www.runoob.com/try/ajax/demo_axios_post.php')
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
});


$(document).ready(function() {
  $("#btn1").click(function() {
    $("#test1").text(function(i, origText) {
      return 'Old text: ' + origText + 'New text: Hello Wrold! (index: ' + i + ')';
    });
  });
  $("#btn2").click(function() {
    $("#test2").html(function(i, origText) {
      return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; 
    })
  })
})
JS;
$this->registerJs($js)
?>
